<template>
	<view class="container">
		<view class="header">
			<text class="title">待操作任务列表</text>
			<view class="quick-entry" @click="navigateToHistory">
				<image src="/static/history-card.png" class="entry-icon" />
				<text class="entry-title">查询历史操作工单</text>
			</view>


		</view>

		<view v-if="tasks.length === 0" class="no-tasks">
			<text>当前暂无待操作的任务</text>
		</view>

		<view v-else class="task-list">
			<view v-for="task in tasks" :key="task.id" class="task-card">
				<view class="task-info">
					<view class="info-row">
						<text class="label">工单编号：</text>
						<text>{{ task.id }}</text>
					</view>
					<view class="info-row">
						<text class="label">状态：</text>
						<text :class="['status-tag', getStatusClass(task.operateStatus)]">
							{{ formatOperateStatus(task.operateStatus) }}
						</text>
					</view>

					<view class="info-row">
						<text class="label">申请时间：</text>
						<text>{{ task.createTime }}</text>
					</view>
				</view>
				<button class="detail-button" @click="viewTask(task)">查看详情</button>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				tasks: [], // 待操作工单列表
			};
		},
		mounted() {
			this.loadTasks();
		},
		methods: {
			async loadTasks() {
				try {
					const token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/operate/orderList",
						method: 'get',
						header: {
							'Authorization': 'Bearer ' + token
						}
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.tasks = res.data.data;
					} else {
						uni.showToast({
							title: "加载待操作任务失败",
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: "请求接口失败" + err.message,
						icon: 'none'
					});
				}
			},
			formatUrgency(urgency) {
				switch (urgency) {
					case 1:
						return '低';
					case 2:
						return '中';
					case 3:
						return '高';
					default:
						return '未知';
				}
			},
			formatTimeOut(timeOut) {
				return timeOut ? '是' : '否';
			},
			formatOperateStatus(operateStatus) {
				switch (operateStatus) {
					case 1:
						return "待接单";
					case 2:
						return "操作中";
					case 3:
						return "待接受委派";
					case 4:
						return "委派中";
					case 5:
						return "完成委派";
					case 6:
						return "已完成";
				}
			},
			getStatusClass(operateStatus) {
				switch (operateStatus) {
					case 1:
						return 'status-wait';
					case 2:
						return 'status-processing';
					case 3:
						return 'status-assigning';
					case 4:
						return 'status-delegating';
					case 5:
						return 'status-finished';
					case 6:
						return 'status-completed';
					default:
						return '';
				}
			},

			viewTask(task) {
				uni.navigateTo({
					url: `/pages/taskdetail/taskdetail?orderId=${task.id}&operateStatus=${task.operateStatus}`
				});
			},
			navigateToHistory() {
				uni.navigateTo({
					url: '/pages/historytask/historytask'
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.header {
		background: linear-gradient(to right, #3b82f6, #2563eb);
		color: white;
		padding: 15px;
		text-align: center;
		border-radius: 8px;
		position: relative;
	}

	.nav-button {
		position: absolute;
		top: 15px;
		right: 20px;
		font-size: 14px;
		color: white;
		cursor: pointer;
		font-weight: bold;
	}

	.task-list {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.task-card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.task-info {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.info-row {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #333;
	}

	.label {
		font-weight: bold;
		color: #2563eb;
		margin-right: 6px;
	}

	.status-tag {
		font-weight: bold;
		padding: 2px 8px;
		border-radius: 12px;
		font-size: 12px;
	}

	.status-wait {
		background-color: #e0f0ff;
		color: #2563eb;
	}

	.status-processing {
		background-color: #fff4e5;
		color: #f59e0b;
	}

	.status-assigning {
		background-color: #f3e8ff;
		color: #8b5cf6;
	}

	.status-delegating {
		background-color: #e0fdfa;
		color: #0d9488;
	}

	.status-finished {
		background-color: #e6f9e9;
		color: #16a34a;
	}

	.status-completed {
		background-color: #f3f4f6;
		color: #6b7280;
	}

	.detail-button {
		background-color: #2563eb;
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 8px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.detail-button:hover {
		background-color: #1d4ed8;
	}

	.no-tasks {
		text-align: center;
		color: #888;
		margin-top: 40px;
		font-size: 16px;
	}

	.quick-entry {
		display: flex;
		align-items: center;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		padding: 12px 16px;
		margin-top: 10px;
		cursor: pointer;
		transition: transform 0.2s;
	}

	.quick-entry:active {
		transform: scale(0.98);
	}

	.entry-icon {
		width: 30px;
		height: 24px;
		margin-right: 10px;
	}

	.entry-title {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}
</style>